<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <title>02_分析生命周期</title>
</head>
<body>


    <!-- 容器 -->
    <div id="root">
         
        <h2>n的值是：{{n}}</h2>
        <button @click="add">单击n+1</button>
        <button @click="myDestroy">单击销毁Vue</button>
    </div>

    <script type="text/javascript">
       Vue.config.productionTip=false; // 阻止 vue 在启动时生成生产提示。
       
      const vm = new Vue({
            el:'#root',
            data:{
                n : 1,
            },
            // 方法
            methods:{
                add(){
                    console.log('n++');
                    this.n++
                },
                myDestroy(){
                    console.log('bey~~');
                    this.$destroy();
                }
            },
            watch:{
                n(){
                  console.log('n被改变了~~');  
                }
            },
            // 创建前：(指创建数据代理，数据监测之前)此时无法通过 vm 访问到 data 中的数据、methods 中的方法。
            beforeCreate() {
                console.log('beforeCreate')
            },
            // 已创建：(指创建数据代理，数据监测已创建)此时可以通过 vm 访问到data中的数据、methods 中的配置的方法。
            created() {
                console.log('created')
            },
            // 即将挂载：此时：1.页面呈现的是未经Vue编译的DOM结构。2.在此函数中所有对DOM的操作，最终都不奏效
            beforeMount() {
                console.log('beforeMount');
            },
            // 挂载：此时 1.页面中呈现的是经过Vue编译的DOM。2.对DOM的操作均有效（尽可能避免操作）。
            // 至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。
            mounted() {
                console.log('mounted');
            },
            // 更新前：此时数据是新的，但页面是旧的，即：页面尚未和数据保持同步。
            beforeUpdate() {
                console.log('beforeUpdate');
            },
            // 已更新：此时数据是新的，页面也是新的，即：页面和数据保持同步
            updated() {
                console.log('updated');
                // console.log(this.n)
                // debugger;
            },
            // 销毁前：此时vm中所有的：data、methods、指令等待，都处于可用状态（但是都不会触发Vue更新流程），
            // 马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作
            beforeDestroy() {
                console.log('beforeDestroy');
                this.add();
            },
            // 已销毁
            destroyed() {
                console.log('destroyed');
            },

             
        })
 
        
    </script>
</body>
</html>